<p>angular-day2 works!</p>
<hr>
<!-- odd代表的index是否为偶数， even代表的是index是否为奇数 -->
<div *ngFor="let item of colorList let i=index let odd=odd let even=even">
    {{i}} &nbsp;▏&nbsp;
    {{item}}&nbsp; ▏&nbsp;
    {{"偶数："+odd}}&nbsp; ▏&nbsp;
    {{"奇数："+even}}&nbsp; ▏&nbsp;
</div>
<hr>

<div [ngSwitch]="type">
    <div *ngSwitchCase="1">This type is 1</div>
    <div *ngSwitchCase="2">This type is 2</div>
    <div *ngSwitchDefault>This type is not 1 or 2</div>
</div>

<hr>
<!-- (click) 这个代表的是点击事件，格式（事件名），'clickFun这个代表的是点击时候调用函数名'， ' $event 代表传递的是这事件本身（包含属性等参数） -->
<button (click)="clickFun($event)">点击按钮</button>


<hr>
<input type="text" (input)="inputFun($event)">

<hr>
<!-- 模版引用变量， 在标签中使用#usename，可设定一个模版，最终用username.value可调用该标签中的具体值 -->
<input #username type="text" (input)="inputFun($event)">
<br>
<button (click)="clickAndAletFun(username.value)">点击并输出按钮</button>

<hr>
<input type="text" [(ngModel)]="docTitle">
<p>Title is : {{docTitle}}</p>

<hr>
<!-- 动态表单控件 -->
<div [id]="'click-show'">
        年龄输入框: <input type="text" [formControl]="age">
        <!-- age是我们已经声明的formContro类型，是个对象，需要使用age.value才能调用 -->
        <p>最终显示的年龄:{{age.value}}</p>
        <button (click)="updateAgeValue()">点击按钮修改age的值,并显示在如上输入框中</button>
</div>


<hr>
<!-- 动态表单空间组 -->
<form [formGroup]="loginForm">
    <label>
        账号：
        <input type="text" formControlName="userName">
    </label>
    <label>
        密码：
        <input type="text" formControlName="password">
    </label>
    <button (click)="printLoginInfo()">提交</button>
</form>
